<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .window{
          width: 1226px;
          height: 460px;
          border: 1px solid #000;
          margin: 0 auto;
          position: relative;
          /*overflow: hidden;*/
      }
      .move{
          width: 100%;
          height: 460px;
          position: absolute;
          top: 0;
          left: 0;
      }
      .move .pic{
          width: 1226px;
          height: 460px;
          display: none;
          position: absolute;
          left: 0;
          top: 0;
      }
      .pic img{
          width: 100%;
      }

      /*.move .pic:nth-child(1) {
          display: block;
      }*/

      .l-arrow{
          position: absolute;
          top: 50%;
          margin-top: -35px;
          width: 41px;
          height: 70px;
          background: url("img/arrow.png") no-repeat -84px 50%;
          z-index: 1;
      }
      .r-arrow{
          position: absolute;
          top: 50%;
          left: 1226px;
          margin-left: -41px;
          margin-top: -35px;
          width: 41px;
          height: 70px;
          background: url("img/arrow.png") no-repeat -125px 50%;
          z-index: 1;
      }
      .choice{
          width: 100px;
          height: 10px;
          display: flex;
          justify-content: space-between;
          position: absolute;
          top: 425px;
          left: 563px;
          z-index: 1;
      }
      .circle{
          width: 15px;
          height: 15px;
          border-radius: 50%;
          border: 3px solid #b0b0b0;
          box-sizing: border-box;
      }
      .change{
          background-color: orange;
      }
    </style>
</head>
<body>

<!--
<div class="window" id="banner3"></div>
-->


    <h1>hello banner</h1>
    <h2>hello banner</h2>

  <div class="window" id="banner1">
      <div class="choice">
          <i data-choice="0" class="circle"></i>
          <i data-choice="0" class="circle"></i>
          <i data-choice="0" class="circle"></i>
          <i data-choice="0" class="circle"></i>
          <i data-choice="0" class="circle"></i>
      </div>
      <div class="l-arrow"></div>
      <div class="r-arrow"></div>
      <div class="move">
          <div class="pic">
              <img src="img/home0.webp" alt="">
          </div>
          <div class="pic">
              <img src="img/home1.webp" alt="">
          </div>
          <div class="pic">
              <img src="img/home2.webp" alt="">
          </div>
          <div class="pic">
              <img src="img/home3.webp" alt="">
          </div>
          <div class="pic">
              <img src="img/home4.webp" alt="">
          </div>
      </div>
  </div>

  <div class="window" id="banner2">
      <div class="choice">
          <i data-choice="0" class="circle"></i>
          <i data-choice="0" class="circle"></i>
          <i data-choice="0" class="circle"></i>
      </div>
      <div class="l-arrow"></div>
      <div class="r-arrow"></div>
      <div class="move">
          <div class="pic">
              <img src="img/home2.webp" alt="">
          </div>
          <div class="pic">
              <img src="img/home3.webp" alt="">
          </div>
          <div class="pic">
              <img src="img/home4.webp" alt="">
          </div>
      </div>
  </div>


<script src="js/jquery.js"></script>
<script src="js/carousel.jquery.js"></script>
<script src="js/index.js"></script>
</body>
</html>
